<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的定位</title>
    <link rel="stylesheet" href="../CSS/12.1.css">
</head>
<body>
<article>
<!--    元素的定位-->
    <aside>
        <h2>元素的定位</h2>
        <p>1.定位模式分为：静态定位（static），相对定位（relative），绝对定位（absolute），固定定位（fixed）四种</p>
        <p>定位模式通过position标签定义，默认的属性值为静态定位（static）</p>
        <ul>
            <li>static:静态定位，默认值，无法通过偏移属性改变元素的位置</li>
            <li>relative:相对定位，相对于其在原文档流的位置进行定位</li>
            <li>absolute:绝对定位，相对于其上一个已经定位的父元素进行定位</li>
            <li>fixed:固定定位，相对于浏览器窗口进行定位</li>
        </ul>
        <p>2.边偏移：通过边偏移属性可以精确定位元素的位置</p>
        <ul>
            <li>left:左偏移量，定义元素相对于其父元素左边线的距离</li>
            <li>right:右偏移量，定义元素相对于其父元素右边线的距离</li>
            <li>top:顶部偏移量，定义元素相对于其父元素上边线的距离</li>
            <li>bottom:底部偏移量，定义元素相对于其父元素下边线的距离</li>
        </ul>
        <p>偏移量的优先级是左上然后右下</p>
        <p>如果同时设置了左右两个偏移属性，那么会使用left属性而忽略掉right属性，上下也是同理</p>
    </aside>
    <aside>
        <h2>静态定位</h2>
        <p>静态定位是元素定位的默认属性，所有没有设定定位方式的元素都是静态定位，按照标准流进行布局。在静态状态下，元素不能通过设置边偏移属性的值改变元素的位置</p>
    </aside>
    <aside>
        <h2>相对定位</h2>
        <p>相对定位是指网页元素相对于自己在原文档流的位置进行定位，当元素设置为相对定位时，该元素就会相对于自身的默认位置进行偏移，但是它在文档流中的位置依然保留</p>
        <h2>演示</h2>
        <article class="article1">
            <aside class="aside1">
                aside1
            </aside>
            <aside class="aside2">
                aside2
            </aside>
            <aside class="aside3">
                aside3
            </aside>
        </article>
        <p>由图中可以看出，aside2设置为相对定位，是相对于自身的位置进行偏移的，其原来的位置在文档流中仍然保留</p>
    </aside>
    <aside>
        <h2>绝对定位</h2>
        <p>绝对定位是指元素相对于距离自己最近的，已经定位的父元素进行定位，若所有父元素都没有定位，那么就根据标签body进行定位。当元素设置绝对定位时，就会根据其最近定位的父元素或者body
        进行偏移，其原本文档流中的位置也会被其他的元素取代</p>
        <h2>演示</h2>
        <article class="article2">
            <aside class="aside4">
                aside4
            </aside>
            <aside class="aside5">
                aside5
            </aside>
            <aside class="aside6">
                aside6
            </aside>
        </article>
        <p>由图中就可以看出，aside5设定了绝对定位，其相对于父级元素发生了偏移，且原本的文档流的位置也被其他元素取代。</p>
        <p>如果父级元素没有设定定位，那么元素就会根据body进行偏移</p>
        <h2>子绝父相原则</h2>
        <p>我们可以将父元素设置为相对定位，但是不设置边偏移。这样，既满足了父元素定位的条件，又不改变父元素的位置。而子元素就能设置为绝对定位，相对于父元素进行偏移，这就是常用的“子绝父相”原则</p>
    </aside>
    <aside>
        <h2>固定定位</h2>
        <p>固定定位是静态定位的一种特殊方式，它是根据浏览器窗口进行定位的。当元素设定固定定位的时候，无论浏览器窗口怎么改变怎么移动都不会改变元素的位置，并且元素在文档流原本的位置也会被其他元素替代</p>
    </aside>
    <aside>
        <h2>z-index层叠等级属性</h2>
        <p>在设置元素定位方式的时候，可能会出现元素发生重叠的情况，这时候就可以使用z-index属性来决定元素的上下层层次关系</p>
        <p>z-index属性的取值可以有正整数，0，负整数，值越大，就越靠上</p>
        <p>z-index有一个从父原则,即父元素如果设定了z-index属性，那么父元素内的所有子元素都会有相同的属性值，就算单独为子元素设定z-index属性值也无效</p>
    </aside>
</article>
</body>
</html>